<template>
  <div id="contain">
    <div class="box">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="景点名称" style="width: 500px" :rules="rules">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="所属省份" :rules="rules">
          <el-select v-model="form.parentAreaName" placeholder="请选择省份">
            <el-option label="北京" value="北京"></el-option>
            <el-option label="天津" value="天津"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="重庆" value="重庆"></el-option>
            <el-option label="河北" value="河北"></el-option>
            <el-option label="河南" value="河南"></el-option>
            <el-option label="云南" value="云南"></el-option>
            <el-option label="黑龙江" value="黑龙江"></el-option>
            <el-option label="湖南" value="湖南"></el-option>
            <el-option label="安徽" value="安徽"></el-option>
            <el-option label="山东" value="山东"></el-option>
            <el-option label="江苏" value="江苏"></el-option>
            <el-option label="浙江" value="浙江"></el-option>
            <el-option label="江西" value="江西"></el-option>
            <el-option label="湖北" value="湖北"></el-option>
            <el-option label="甘肃" value="甘肃"></el-option>
            <el-option label="山西" value="山西"></el-option>
            <el-option label="陕西" value="陕西"></el-option>
            <el-option label="吉林" value="吉林"></el-option>
            <el-option label="福建" value="福建"></el-option>
            <el-option label="贵州" value="贵州"></el-option>
            <el-option label="广东" value="广东"></el-option>
            <el-option label="青海" value="青海"></el-option>
            <el-option label="四川" value="四川"></el-option>
            <el-option label="海南" value="海南"></el-option>
            <el-option label="台湾" value="台湾"></el-option>
            <el-option label="新疆" value="新疆"></el-option>
            <el-option label="广西" value="广西"></el-option>
            <el-option label="内蒙古" value="内蒙古"></el-option>
            <el-option label="宁夏" value="宁夏"></el-option>
            <el-option label="西藏" value="西藏"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" style="width: 500px" :rules="rules">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="景点图片" :rules="rules">
          <el-upload
            action=""
            list-type="picture-card"
            :file-list="fileList"
            :http-request="upload"
            :before-upload="beforeUpload"
            ref="uploadJd"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="景点介绍" :rules="rules">
          <el-input
            type="textarea"
            :rows="8"
            v-model="form.introduction"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled='!this.fileUrl'>立即创建</el-button>
          <el-button @click="back">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import utils from '@/assets/utils'

export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      form: {
      },
      rules: { required: true },
      fileList: [],
      imgForm: new FormData(),
      imgUrl: "",
      fileName: "",
      fileUrl: "",
    };
  },
  methods: {
    onSubmit() {
      this.$axios({
        method: "post",
        url: "/scenicarea/add",
        headers: { token: this.token },
        data: this.form,
      }).then((res) => {
        // console.log(res);
        if (res.data.code !== 0) {
          this.$message.error(res.data.msg);
          return false;
        }
        this.$message.success("景点创建成功")
        this.back()
        utils.$emit('getMyJdList')
        utils.$emit('getManageJdList')
        return true
        // this.$router.go(0)
      });
    },
    back() {
      this.form = {};
      this.fileUrl = ''
      this.$refs['uploadJd'].clearFiles()
    },
    upload() {
      this.$axios({
        method: "post",
        url: "/oss/upload/scenic",
        headers: { token: this.token },
        data: this.imgForm,
      }).then((res) => {
        let data = res.data;
        if (data.code !== 0) {
          this.$message.error(res.data.msg);
          return false;
        }
        this.fileName = data.name;
        this.fileUrl = data.url;
        this.form.pic=this.fileUrl
        this.$message.success("上传成功");
        return true
      });
    },
    beforeUpload(file) {
      if (file) {
        this.imgForm.append("file", file);
      } else {
        return false;
      }
    },
  },
};
</script>
<style  scoped>
.box {
  width: 900px;
  margin: 30px;
}
</style>>
